<!-- 在途数据 -->
<div class="box box-default">
  <div class="box-body">
    <form class="form-inline" #batchSearchForm="ngForm">
      <div class="box box-default collapsed-box">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
          <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-flowInfo')" (click)="showModal()" type="button" class="btn btn-primary">
            <i class="fa fa-search"></i>查看流程信息
          </button>
          <button class="btn btn-box-tool pull-right" data-widget="collapse">
            <i class="fa fa-plus"></i>
          </button>
        </div>
        <div class="box-body">
          <div class="form-group" style="padding-left:5px !important;margin-bottom:8px !important;">
            <div class="row">
              <div class="col-md-12 col-xs-12" style="margin-top:10px;">
                <label class="control-label">发起日期：</label>
                <div class="input-group date form_datetime" style="max-width:182px !important;">
                  <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </span>
                  <input class="form-control" type="text" mwlFlatpickr [(ngModel)]="getBody.sOprDateStart" name="sOprDateStart" style="background: white; cursor: pointer;">
                </div>
                <label class="control-label">到：</label>
                <div class="input-group date form_datetime" style="max-width:182px !important;">
                  <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </span>
                  <input class="form-control" type="text" mwlFlatpickr [(ngModel)]="getBody.sOprDateEnd" name="sOprDateEnd" style="background: white; cursor: pointer;">
                </div>
                <label class="control-label">提交人：</label>
                <input type="text" class="form-control" placeholder="提交人" [(ngModel)]="getBody.commitOprZh" name="commitOprZh">
              </div>
              <div class="col-md-12" style="margin-top:10px;">
                <label class="control-label">文件名称：</label>
                <input type="text" class="form-control" placeholder="文件名称" [(ngModel)]="getBody.sFileName" name="sFileName">
                <label class="control-label">适用基金类别：</label>
                <select class="form-control" name="sFundType" [(ngModel)]="getBody.sFundType">
                  <option [value]="''">请选择</option>
                  <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.RISK_ACCOUNT_TYPE">{{item.sItemValue}}</option>
                </select>
                <label class="control-label">适用基金组：</label>
                <select [(ngModel)]="sFundGroupds" name="sFundGroupds" id="NqdiiDITFundGroupds" multiple></select>

              </div>
              <div class="col-md-12 col-xs-12" style="margin-top:10px;">
                <label class="control-label">批次区间：</label>
                <input [min]="0" type="text" digits #nBatchNoStart="ngModel" maxlength="9" class="form-control" placeholder="起始区间" [(ngModel)]="getBody.nBatchNoStart"
                  name="nBatchNoStart">
                <label class="control-label">到：</label>
                <input [min]="0" type="text" digits #nBatchNoEnd="ngModel" maxlength="9" class="form-control" placeholder="结束区间" [(ngModel)]="getBody.nBatchNoEnd"
                  name="nBatchNoEnd">

                <button type="button" class="btn btn-primary" style="margin-left:10px;" (click)="searchQuery()" [disabled]="nBatchNoStart.errors?.digits||nBatchNoEnd.errors?.digits">
                  <i class="fa fa-search"></i>查询</button>

              </div>
              <div class="col-md-12">
                <div class="form-group col-lg-4" style="padding-left:0px !important">
                  <p *ngIf="nBatchNoStart.errors?.digits" class="errorTip" style="padding-left:80px">请输入正整数</p>
                </div>
                <div class="form-group col-lg-4" style="padding-left:0px !important">
                  <p *ngIf="nBatchNoEnd.errors?.digits" class="errorTip" style="padding-left:0px">请输入正整数</p>
                </div>
              </div>
            </div>



          </div>



        </div>
      </div>


    </form>
    <div class="ibt-fixed-table-container">
      <!-- <div class="table-scroll-content"> -->
        <div id="data-table" #transitTablePage></div>
      <!-- <table id="data-table" class="table table-bordered table-hover table-striped table-keep-line" style="margin-top:unset !important;">
        <thead>
          <tr>
            <th style="width:50px !important">
              <div class="cell">
                <div class="checkbox checkbox-primary">
                  <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                  <label>
                  </label>
                </div>
              </div>
            </th>
            <th style="width:60px !important">
              <div class="cell">序号</div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sCreator')">提交人
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:60px !important">
              <div class="cell" (click)="orderData('nNjId')">编号
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('nBatchNo')">批次号
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sFlowStepZh')">当前流程
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sOprStateZh')">处理状态
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('nSortNo')">条目顺序
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sValidZh')">是否有效
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sItemTypeZh')">属性
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sFileSourceZh')">条款出处
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sFileName')">文件名称
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sFundTypeZh')">适用基金类别
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('sFundGroupdsZh')">适用基金组
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f1')">内容
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f2')">指标释义
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f3')">条目规定阀值
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f4Zh')">事中控制方法
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:150px !important">
              <div class="cell" (click)="orderData('f5')">事中系统控制阀值
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:150px !important">
              <div class="cell" (click)="orderData('f6')">是否事中系统可控
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f7')">系统风控编号
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f8')">事中系统备注
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f9')">事后监控方法
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f10')">监控编号
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f11')">控制说明
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f12')">补偿控制
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f13')">风险等级
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f14')">监察部备注1
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f15')">监察部备注2
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:210px !important">
              <div class="cell" (click)="orderData('f16')">场外系统阀值(新股,定增,转债)
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:150px !important">
              <div class="cell" (click)="orderData('f17')">场外系统阀值(公增)
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th style="width:150px !important">
              <div class="cell" (click)="orderData('f18')">是否场外系统可控
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f19')">场外风控编号
                <i class="fa fa-sort"></i>
              </div>
            </th>
            <th>
              <div class="cell" (click)="orderData('f20')">场外系统备注
                <i class="fa fa-sort"></i>
              </div>
            </th>

          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let item of listData;let i=index;">
            <td style="width:50px !important">
              <div class="checkbox checkbox-primary" id="routeCheck{{i}}">
                <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                <label></label>
              </div>
            </td>
            <td style="width:60px !important" class="short_name" [attr.title]="i+1">{{i+1}}</td>
            <td class="short_name" [attr.title]="item.sCreator">{{item.sCreator}}</td>
            <td style="width:60px !important" class="short_name" [attr.title]="item.nNjId">{{item.nNjId}}</td>
            <td class="short_name" [attr.title]="item.nBatchNo">{{item.nBatchNo}}</td>
            <td class="short_name" [attr.title]="item.sFlowStepZh">
              <div name="sFlowStepZh" class="font-color">
                {{item.sFlowStepZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sOprStateZh">
              <div name="sOprStateZh" class="font-color">
                {{item.sOprStateZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.nSortNo">
              <div name="nSortNo" class="font-color">
                {{item.nSortNo}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sValidZh">
              <div name="sValidZh" class="font-color">
                {{item.sValidZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sItemTypeZh">
              <div name="sItemTypeZh" class="font-color">
                {{item.sItemTypeZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sFileSourceZh">
              <div name="sFileSourceZh" class="font-color">
                {{item.sFileSourceZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sFileName">
              <div name="sFileName" class="font-color">
                {{item.sFileName}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sFundTypeZh">
              <div name="sFundTypeZh" class="font-color">
                {{item.sFundTypeZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.sFundGroupdsZh">
              <div name="sFundGroupdsZh" class="font-color">
                {{item.sFundGroupdsZh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f1">
              <div name="f1" class="font-color">
                {{item.f1}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f2">
              <div name="f2" class="font-color">
                {{item.f2}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f3">
              <div name="f3" class="font-color">
                {{item.f3}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f4Zh">
              <div name="f4Zh" class="font-color">
                {{item.f4Zh}}
              </div>
            </td>
            <td style="width:150px !important" class="short_name" [attr.title]="item.f5">
              <div name="f5" class="font-color">
                {{item.f5}}
              </div>
            </td>
            <td style="width:150px !important" class="short_name" [attr.title]="item.f6Zh">
              <div name="f6Zh" class="font-color">
                {{item.f6Zh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f7">
              <div name="f7" class="font-color">
                {{item.f7}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f8">
              <div name="f8" class="font-color">
                {{item.f8}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f9Zh">
              <div name="f9Zh" class="font-color">
                {{item.f9Zh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f10">
              <div name="f10" class="font-color">
                {{item.f10}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f11">
              <div name="f11" class="font-color">
                {{item.f11}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f12">
              <div name="f12" class="font-color">
                {{item.f12}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f13Zh">
              <div name="f13Zh" class="font-color">
                {{item.f13Zh}}
              </div>
            </td>
            <td class="short_name " [attr.title]="item.f14">
              <div name="f14" class="font-color">
                {{item.f14}}
              </div>
            </td>
            <td class="short_name " [attr.title]="item.f15">
              <div name="f15" class="font-color">
                {{item.f15}}
              </div>
            </td>
            <td style="width:210px !important" class="short_name" [attr.title]="item.f16">
              <div name="f16" class="font-color">
                {{item.f16}}
              </div>
            </td>
            <td style="width:150px !important" class="short_name" [attr.title]="item.f17">
              <div name="f17" class="font-color">
                {{item.f17}}
              </div>
            </td>
            <td style="width:150px !important" class="short_name" [attr.title]="item.f18Zh">
              <div name="f18Zh" class="font-color">
                {{item.f18Zh}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f19">
              <div name="f19" class="font-color">
                {{item.f19}}
              </div>
            </td>
            <td class="short_name" [attr.title]="item.f20">
              <div name="f20" class="font-color">
                {{item.f20}}
              </div>
            </td>
          </tr>
        </tbody>

      </table> -->
      <!-- </div> -->
    </div>
    <div class="box-footer clearfix" style="width:100%;">
      <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
          </span>
          <span class="page-list">
            每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{listPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
            </span>
            条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 显示流程信息modal -->
<div class="modal modal-detail" id="modal1">
  <div #flowInfo></div>
</div>
<!-- 显示流程信息modal end-->